import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';

const LoginLanguageSelector = ({ className = '' }) => {
  const { i18n, t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  const languages = [
    { code: 'zh', name: 'chinese', flag: '🇨🇳', label: '中文' },
    { code: 'en', name: 'english', flag: '🇺🇸', label: 'English' },
    { code: 'ja', name: 'japanese', flag: '🇯🇵', label: '日本語' },
    { code: 'ko', name: 'korean', flag: '🇰🇷', label: '한국어' }
  ];

  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];

  const handleLanguageChange = (langCode) => {
    i18n.changeLanguage(langCode);
    localStorage.setItem('language', langCode);
    setIsOpen(false);
  };

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  // 点击外部区域关闭下拉菜单
  React.useEffect(() => {
    const handleClickOutside = (event) => {
      if (!event.target.closest('.login-language-selector')) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('click', handleClickOutside);
    }

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [isOpen]);

  // 登录页面专用的高对比度样式 - 强制右上角定位
  const containerStyle = {
    position: 'fixed',
    top: '20px',
    right: '20px',
    display: 'inline-block',
    zIndex: 1000
  };

  const getTriggerStyle = () => {
    let baseStyle = {
      display: 'flex',
      alignItems: 'center',
      gap: '6px',
      padding: '10px 14px',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.98) 100%)',
      borderWidth: '3px',
      borderStyle: 'solid',
      borderColor: 'rgba(24, 144, 255, 0.8)',
      borderRadius: '10px',
      cursor: 'pointer',
      transition: 'all 0.3s ease',
      fontSize: '14px',
      fontWeight: '600',
      minWidth: '110px',
      backdropFilter: 'blur(20px)',
      boxShadow: '0 10px 30px rgba(24, 144, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.9)',
      zIndex: 1000,
      position: 'relative'
    };

    if (isOpen) {
      baseStyle.background = 'linear-gradient(135deg, rgba(230, 247, 255, 1) 0%, rgba(184, 233, 255, 1) 100%)';
      baseStyle.borderColor = '#1890ff';
      baseStyle.boxShadow = '0 15px 40px rgba(24, 144, 255, 0.6), inset 0 3px 0 rgba(255, 255, 255, 0.95)';
    }

    if (isHovered && !isOpen) {
      baseStyle.background = 'linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(230, 247, 255, 1) 100%)';
      baseStyle.borderColor = 'rgba(24, 144, 255, 0.9)';
      baseStyle.boxShadow = '0 12px 35px rgba(24, 144, 255, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.95)';
      baseStyle.transform = 'translateY(-2px)';
    }

    return baseStyle;
  };

  const dropdownStyle = {
    position: 'absolute',
    top: 'calc(100% + 6px)',
    right: '0',
    background: 'rgba(255, 255, 255, 0.98)',
    borderWidth: '2px',
    borderStyle: 'solid',
    borderColor: 'rgba(24, 144, 255, 0.5)',
    borderRadius: '10px',
    boxShadow: '0 15px 40px rgba(24, 144, 255, 0.35)',
    overflow: 'hidden',
    minWidth: '160px',
    backdropFilter: 'blur(20px)',
    zIndex: 1001
  };

  return (
    <div className={`login-language-selector ${className}`} style={containerStyle}>
      <div 
        style={getTriggerStyle()}
        onClick={toggleDropdown}
        title={t('language.select')}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <span style={{
          fontSize: '18px', 
          lineHeight: 1,
          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.2))'
        }}>
          {currentLanguage.flag}
        </span>
        <span style={{
          fontWeight: '700',
          color: '#1a1a1a',
          whiteSpace: 'nowrap',
          textShadow: '0 1px 3px rgba(255, 255, 255, 0.9)'
        }}>
          {currentLanguage.label}
        </span>
        <span style={{
          fontSize: '12px',
          color: '#1890ff',
          fontWeight: 'bold',
          transition: 'transform 0.3s ease',
          marginLeft: 'auto',
          textShadow: '0 1px 2px rgba(255, 255, 255, 0.8)',
          transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
        }}>
          ▼
        </span>
      </div>
      
      {isOpen && (
        <div style={dropdownStyle}>
          {languages.map((language) => (
            <div
              key={language.code}
              onClick={() => handleLanguageChange(language.code)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '10px',
                padding: '14px 18px',
                cursor: 'pointer',
                transition: 'all 0.2s ease',
                fontSize: '14px',
                fontWeight: '500',
                                 borderBottomWidth: '1px',
                 borderBottomStyle: 'solid',
                 borderBottomColor: 'rgba(24, 144, 255, 0.15)',
                backgroundColor: language.code === i18n.language 
                  ? 'rgba(24, 144, 255, 0.15)' 
                  : 'transparent',
                color: language.code === i18n.language 
                  ? '#1890ff' 
                  : '#333'
              }}
              onMouseEnter={(e) => {
                if (language.code !== i18n.language) {
                  e.target.style.backgroundColor = 'rgba(24, 144, 255, 0.08)';
                }
              }}
              onMouseLeave={(e) => {
                if (language.code !== i18n.language) {
                  e.target.style.backgroundColor = 'transparent';
                }
              }}
            >
              <span style={{
                fontSize: '16px',
                filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))'
              }}>
                {language.flag}
              </span>
              <span style={{
                flex: 1,
                fontWeight: language.code === i18n.language ? '600' : '500'
              }}>
                {language.label}
              </span>
              {language.code === i18n.language && (
                <span style={{
                  color: '#1890ff',
                  fontWeight: 'bold',
                  fontSize: '16px',
                  textShadow: '0 1px 2px rgba(255, 255, 255, 0.8)'
                }}>
                  ✓
                </span>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default LoginLanguageSelector; 